<template>
    <Nav />
    <Menu />
    <div class="info-box">
        <h3 class="title">{{ info.title }}</h3>
        <div class="remark">来源：{{ info.source }}&nbsp;&nbsp;&nbsp;&nbsp;时间：{{ info.date }}</div>
        <div class="info" v-html="info.content"></div>
        <img :src="info.image" :alt="info.altText" class="img" />
      </div>
    <Footer />
  </template>



  <script setup lang="ts">
  import Nav from "../components/navBar.vue";
  import Menu from "../components/menu.vue";
  import Swiper from "../components/swiper1.vue";
  import Footer from "../components/footer.vue";
import axios from 'axios';
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const route = useRoute();
interface NewsItem {
  title: string;
  source: string;
  date: string;
  content: string;
  image: string;
  altText: string;
}

const info = ref<NewsItem>({  
  title: '',
  source: '',
  date: '',
  content: '',
  image: '',
  altText: ''
});

const fetchData = async () => {
  try {
    const title = localStorage.getItem("newstitle")
    const response = await axios.post('http://127.0.0.1:5000/get_newsdetail',{
      "title":title
    });
    const data = response.data[0];
    console.log(data)
    // 假设API返回的数据结构与NewsItem不同，需要进行转换
    const newsItem: NewsItem = {
      title: data.title || info.value.title,
      source: data.source || info.value.source,
      date: data.date || info.value.date,
      content: data.content || info.value.content,
      image: data.image || info.value.image,
      altText: data.altText || info.value.altText
    };
    info.value = newsItem;
  } catch (error) {
    console.error('Error fetching data:', error);
  }

};
onMounted(fetchData);
  </script>
  
  <style lang="scss" scoped>
  .info-box {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      font-size: 1.125rem;
      color: #182880;
    }
    .remark {
      font-size: 0.875rem;
      color: #787878;
      margin: 1.25rem 0;
      margin-bottom: 2.5rem;
    }
    .info {
      font-size: 1rem;
      line-height: 30px;
      letter-spacing: 0.125rem;
      font-size: 1.0625rem;
      p {
        margin-top: 0.9375rem;
      }
    }
    .img {
      width: 80%;
      margin-top: 80px;
    }
  }
  </style>
  